<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app">
			{{title}}	
			<news-com 
				:title="title"
			></news-com>
			<cutom-test :title='title'></cutom-test>			
		</div>
		<script type="text/x-template" id="news2">
			<div>
				<button @click="t=123">改变title</button>
				<h2>{{t}}</h2>
			</div>
		</script>

		<script>
			/*
				父组件 -> 子组件 通信 使用props传参
					子组件不能修改props传入的参数
				子组件 -> 父组件 通信 使用自定义事件 订阅/发布模式
					在子组件中，可以发布一个事件
						this.$emit(自定义事件名,[参数])
					父组件关心子组件的状态改变，可以监听这个事件
						在自定义的标签行间写上 @自定义事件名='方法'
			*/
			Vue.component('newsCom',{
				props: {
					title: {
						type: String,
						default: '这是默认值'
					}
				},
				data(){  // 组件自己的状态，可以改变
					return {
						t: this.title  // 把父级传入的props作为初始值
					}
				},
				template:`#news2`
			})
			Vue.component('cutom-test',{
				props: ['title'],
				template:`<div>{{title}}</div>`
			})


			let news = {
				title: '娱乐',
				list: ['娱乐新闻1','娱乐新闻1']
			}

			// 未挂载
			let vm = new Vue({
				el:'#app',
				data: {
					message:'hello',
					news:news,
					title: 'hello'
				}
			});

		</script>
	</body>
</html>